<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="wrap">
        <div class="title">学生系统</div>
        <div id="form">
            <p>姓名<input id="username" type="text" value="张三123" /></p>
            <p>年龄<input id="age" type="text" value="21" /></p>
            <p>性别
                <select id="gender">
                    <option>男</option>
                    <option>女</option>
                    <option>你猜</option>
                </select>
            </p>
            <p>
                <input type="button" value="添加" id="addBtn" />
                <input type="button" value="排序" id="sortBtn" />
            </p>
        </div>
        <table id="table">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <script>
        // 一、获取姓名 年龄  和性别；
        // 先获取元素 ，在操作
        var usernameEle = document.querySelector("#username");
        var ageEle = document.querySelector("#age");
        var genderEle = document.querySelector("#gender");
        var addBtn = document.querySelector("#addBtn");
        var tbodyEle = document.querySelector("tbody");

        // 二 、当点击添加按钮的时候 添加内容
        addBtn.onclick = function(){
           
            // console.log(111);
            // 组装tr 放在 tbody里 ； tr 里的td内容 是上面获取到的内容；
            // 获取input 框里的值 ；
            var username = usernameEle.value;
            var age = ageEle.value;
            var gender = genderEle.value;
            // console.log(username,age,gender);
            /* 
                方式一： 通过 \ 来换行 
                方式二 ： 通过 +  来换行 
                方式三 ： 利用 模板字符串 ，反引号定义字符串；`字符串`

            
            */
            // var str = "hello";
            // var str = 'world';
            // var str = `nihao`;

            var trStr = "<tr><td>"+username+"</td><td>"+age+"</td><td>"+gender+"</td><td>删除</td></tr>";
            console.log(trStr);
            tbodyEle.innerHTML += trStr;


        }

        // 上下横跳
    </script>
</body>

</html>